<script>
import BookshelfApi from '../../api/bookshelf';

export default {
    inject:["reload"],
    data() {
        return {
            myBookList: [],
            total: 0,
            pageSize: 7,
            curPage: 0,
            limit: -1,
            offset: -1,
            modalShow: false,//模态框是否显示
            modalTitle: "",//模态框标题
            searchBookList: [],
            readStatus: []
        }
    },
    methods: {
        async getBookshelfList(limit = -1, offset = -1) {
            try {
                let orderBy = "created_time";
                let sort = "DESC";
                const api = new BookshelfApi();
                let res = await api.findAll(limit, offset, orderBy, sort);
                this.myBookList = res.data;
                this.readStatus = this.myBookList.map(item => item.readStatus);
                console.log(this.myBookList);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async getCount() {
            try {
                const api = new BookshelfApi();
                let res = await api.getCount();
                this.total = res.data.total;
                console.log(this.total);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        goto(page) {
            this.curPage = page;
            this.offset = (page - 1) * this.pageSize;
            this.getBookshelfList(this.limit, this.offset);
        },
        searchResult(data) {
            if (data.length > 0) {
                this.modalShow = true;
                this.modalTitle = "搜索结果";
                this.searchBookList = data;
            } else {
                this.$myMessageBox("未找到相关书籍信息");
            }
        },
        closeModal() {
            this.modalShow = false;
            this.modalTitle = "";
        },
        async addMyBookshelf(bookId) {
            try {
                let msg = "";
                const api = new BookshelfApi();
                let res1 = await api.findByBookId(bookId);
                console.log(res1);
                if (res1.data.id) {
                    msg = `【${res1.data.title}】已收藏`;
                } else {
                    let res2 = await api.add(bookId);
                    console.log(res2);
                    if (res2.code === 201 && res2.data.lastID > 0) {
                        msg = res2.msg;
                    }
                }
                this.$myMessageBox(msg);
                this.closeModal();
                this.reload();

            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async delFromMyBookshelf(id) {
            try {
                const api = new BookshelfApi();
                let res = await api.delete(id);
                if (res.code === 204) {
                    this.$myMessageBox(res.msg);
                }
                this.reload();
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async updateReadStatus(id, readStatus, index) {
            readStatus = readStatus === 0 ? 1 : 0;
            try {
                let api = new BookshelfApi();
                let res = await api.updateReadStatus(id, readStatus);
                if (res.code === 200) {
                    this.readStatus[index] = readStatus;
                }
            } catch (err) {
                this.$messageBox("远程服务器错误！！！");
            }
        },
        async updateRanking(id, ranking) {
            try {
                const api = new BookshelfApi();
                await api.updateRanking(id, ranking);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    async mounted() {
        this.curPage = 1;
        this.limit = this.pageSize;
        this.offset = 0;
        await this.getCount();
        await this.getBookshelfList(this.limit, this.offset);
    }
}
</script>

<template>
    <div class="booshelf-list">
        <div class="header">
            <my-pagination :total="total" :page-size="pageSize" :cur-page="curPage" :show-info="true" @goto="goto" />
            <book-search @search-result="searchResult"></book-search>
        </div>
        <div class="block">
            <ul>
                <li v-for="book in myBookList" :key="book.id">
                    <div>
                        <img :src="book.pic" :alt="book.title" referrerpolicy="no-referrer">
                        <p>
                            <span class="title">{{ book.title }}</span>
                            <span class="author">{{ book.author }}</span>
                        </p>
                    </div>
                    <div class="action">
                        <p>
                            <a href="javascript:void(0);" @click="delFromMyBookshelf(book.id)">取消收藏</a>
                        </p>
                        <p>
                            <a href="javascript:void(0);"
                                @click="updateReadStatus(myBook.id, readStatus[index], index)">
                                <span v-if="readStatus[index] === 0">未读</span>
                                <span v-else>已读</span>
                            </a>
                        </p>
                        <p>
                            <label for="ranking">评分{{ book.ranking }}</label>
                            <input type="range" id="ranking" min="1" max="10" step="1" v-model="book.ranking"
                                @change="updateRanking(book.id, book.ranking)">
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <my-modal :title="modalTitle" @close-modal="closeModal" v-if="modalShow">
                <ul>
                    <li v-for="book in searchBookList" :key="book.id">
                        <span>{{ book.title }}</span>
                        <span>{{ book.author }}</span>
                        <span>{{ book.publisher }}</span>
                        <span>{{ book.pubdate }}</span>
                        <button @click="addMyBookshelf(book.id)">加入书架</button>
                    </li>
                </ul>
            </my-modal>
        </div>
    </div>
</template>

<style scoped>
div.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: #06c dashed 1px;
}

.block ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.block li {
    list-style-type: none;
    box-sizing: border-box;
    flex: 0 1 calc(25% - 16px);
    min-width: calc(25% - 16px);
    max-width: 100%;
    background-color: rgba(92, 92, 92, 0.1);
    display: flex;
    flex-wrap: wrap;
    margin: 8px;
    padding: 16px;
    border-radius: 16px;
}

.block li:hover {
    background-color: rgba(120, 110, 255, 0.3);
}

.block li img {
    width: 120px;
    height: 165px;
}

.block li div {
    font-size: 14px;
    display: flex;
}

.block li div>p {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
}

.block li p span {
    margin-top: 5px;
}

.block div.action {
    min-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

input[type="range"] {
    width: 50%;
}
</style>